<template>
  <div>
    <!-- 第一步：选择协议 -->
    <div class="step1">
      <div class="head">选择协议</div>
      <div class="body">
        <div class="th">
          <div class="td">选择协议</div>
          <div class="td">最后一次扫描</div>
          <div class="td">记录</div>
          <div class="td">参数设置</div>
        </div>
        <div class="tr" v-for="(item, index) in list" :key="index">
          <div class="td">
            <el-checkbox
              :label="item.protocol"
              style="color: #000; font-weight: 700"
              :checked="item.checked"
              @change="checkboxProtocol(item, $event)"
              :disabled="item.protocol == 'Web' || item.protocol == 'Nmap'"
            ></el-checkbox>
          </div>
          <div class="td">{{ item.lastTime }}</div>
          <div class="td">{{ item.desc }}</div>
          <div class="td">
            <a
              @click="openPup(item.protocol)"
              href="javascript:;"
              v-if="item.protocol == 'Snmp' || item.protocol == 'Ping'"
            >
              <svg-icon class="icon" icon-class="shezhi2" />
            </a>
            <a href="javascript:;" v-else>
              <svg-icon class="icon" icon-class="shezhi" />
            </a>
          </div>
        </div>
      </div>
      <div class="foot">
        <button class="next-step-btn" @click="nextStep">下一步</button>
        <button class="cancel-btn">取消</button>
      </div>
    </div>

    <!-- 设置弹窗-snmp -->
    <div v-if="isShowSnmpPup" class="set-pup-wrap" style="width: 840px">
      <div class="modal-content">
        <div class="close">
          <span @click="closePup('Snmp')">
            <svg-icon iconClass="close" />
          </span>
        </div>
        <div class="content">
          <div class="title">Snmp</div>
          <vxe-table
            class="device-list"
            ref="snmpTable"
            :data="snmpData"
            header-row-class-name="vux-table-header"
            border="none"
            :row-class-name="tableRowClassName"
            @checkbox-change="checkboxSnmp"
            @checkbox-all="checkboxSnmpAll"
          >
            <vxe-table-column width="40">
              <template #header>
                <span class="pointer" @click="add('Snmp')">
                  <svg-icon class="add-btn" icon-class="add"></svg-icon>
                </span>
              </template>
              <template slot-scope="{ row }">
                <span class="pointer" @click.prevent="deleteRow(row, 'Snmp')">
                  <svg-icon
                    style="width: 11px; height: 15px"
                    class="del-btn"
                    icon-class="del"
                  ></svg-icon>
                </span>
              </template>
            </vxe-table-column>
            <vxe-table-column type="checkbox" width="40" />
            <vxe-table-column field="name" title="团体字" min-width="100">
              <template slot-scope="{ row }">
                <vxe-input
                  v-model="row.name"
                  placeholder=""
                  size="mini"
                ></vxe-input>
              </template>
            </vxe-table-column>
            <vxe-table-column field="startIP" title="起始IP" min-width="100">
              <template slot-scope="{ row }">
                <vxe-input
                  v-model="row.startIP"
                  placeholder=""
                  size="mini"
                ></vxe-input>
              </template>
            </vxe-table-column>
            <vxe-table-column field="endIP" title="结束IP" min-width="100">
              <template slot-scope="{ row }">
                <vxe-input
                  v-model="row.endIP"
                  placeholder=""
                  size="mini"
                ></vxe-input>

                <el-tooltip
                  class="item"
                  effect="dark"
                  :content="row.tips"
                  placement="right"
                  v-if="row.isShowTips"
                >
                  <span class="warning">
                    <svg-icon iconClass="warning"></svg-icon>
                  </span>
                </el-tooltip>
              </template>
            </vxe-table-column>
            <vxe-table-column field="options" title="版本" min-width="90">
              <template slot-scope="{ row }">
                <el-select
                  v-model="row.versions"
                  placeholder="选择版本"
                  size="mini"
                  min-width="90"
                >
                  <el-option
                    v-for="(item, index) in row.options"
                    :key="index"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </template>
            </vxe-table-column>
            <vxe-table-column title="更多设置" min-width="60">
              <template>
                <span class="pointer">
                  <svg-icon
                    style="width: 15px; height: 15px"
                    class="del-btn"
                    icon-class="shezhi2"
                  ></svg-icon>
                </span>
              </template>
            </vxe-table-column>
          </vxe-table>
        </div>
        <div class="button-list">
          <div class="button-cancel" @click="closePup('Snmp')">取消</div>
          <div class="button-primary" @click="submit('Snmp')">确定</div>
        </div>
      </div>
    </div>
    <!-- 设置弹窗-ping -->
    <div v-if="isShowPingPup" class="set-pup-wrap" style="width: 550px">
      <div class="modal-content">
        <div class="close">
          <span @click="closePup('Ping')">
            <svg-icon iconClass="close" />
          </span>
        </div>
        <div class="content">
          <div class="title">Ping</div>
          <vxe-table
            class="device-list"
            ref="pingTable"
            :data="pingData"
            header-row-class-name="vux-table-header"
            border="none"
            :row-class-name="tableRowClassName"
            @checkbox-change="checkboxPing"
            @checkbox-all="checkboxPingAll"
          >
            <vxe-table-column width="40">
              <template #header>
                <span class="pointer" @click="add('Ping')">
                  <svg-icon class="add-btn" icon-class="add"></svg-icon>
                </span>
              </template>
              <template slot-scope="{ row }">
                <span class="pointer" @click.prevent="deleteRow(row, 'Ping')">
                  <svg-icon
                    style="width: 11px; height: 15px"
                    class="del-btn"
                    icon-class="del"
                  ></svg-icon>
                </span>
              </template>
            </vxe-table-column>
            <vxe-table-column type="checkbox" width="40" />
            <vxe-table-column field="startIP" title="起始IP" min-width="100">
              <template slot-scope="{ row }">
                <vxe-input
                  v-model="row.startIP"
                  placeholder=""
                  size="mini"
                ></vxe-input>
              </template>
            </vxe-table-column>
            <vxe-table-column field="endIP" title="结束IP" min-width="100">
              <template slot-scope="{ row }">
                <vxe-input
                  v-model="row.endIP"
                  placeholder=""
                  size="mini"
                ></vxe-input>

                <el-tooltip
                  class="item"
                  effect="dark"
                  :content="row.tips"
                  placement="right"
                  v-if="row.isShowTips"
                >
                  <span class="warning">
                    <svg-icon iconClass="warning"></svg-icon>
                  </span>
                </el-tooltip>
              </template>
            </vxe-table-column>
          </vxe-table>
        </div>
        <div class="button-list">
          <div class="button-cancel" @click="closePup('Ping')">取消</div>
          <div class="button-primary" @click="submit('Ping')">确定</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Vue, Component } from "vue-property-decorator";

@Component({
  components: {},
})
export default class Protocol extends Vue {
  [x: string]: any;
  public list: object[] = [
    {
      protocol: "Snmp",
      lastTime: "2020-12-25 09：56：46",
      desc: "(14）See scanned reco",
      checked: false,
    },
    {
      protocol: "Ping",
      lastTime: "2020-12-25 09：56：46",
      desc: "(14）See scanned reco",
      checked: false,
    },
    {
      protocol: "Web",
      lastTime: "2020-12-25 09：56：46",
      desc: "(14）See scanned reco",
      checked: false,
    },
    {
      protocol: "Nmap",
      lastTime: "2020-12-25 09：56：46",
      desc: "(14）See scanned reco",
      checked: false,
    },
  ];
  public pingData: Array<any> = [];
  public snmpData: Array<any> = [];
  public selectedSnmpData: Array<any> = [];
  public selectedPingData: Array<any> = [];
  $router: any;
  public isShowSnmpPup: boolean = false;
  public isShowPingPup: boolean = false;

  public created() {
    this.snmpData =
      JSON.parse(sessionStorage.getItem("snmpData")) == null
        ? []
        : JSON.parse(sessionStorage.getItem("snmpData"));
    this.pingData =
      JSON.parse(sessionStorage.getItem("pingData")) == null
        ? []
        : JSON.parse(sessionStorage.getItem("pingData"));
    sessionStorage.setItem("selectedSnmpData", JSON.stringify([]));
    sessionStorage.setItem("selectedPingData", JSON.stringify([]));
  }
  //复选框-协议
  public checkboxProtocol(item: any, $event: any) {
    item.checked = $event;
  }
  //复选框-Snmp单选
  public checkboxSnmp({ records }) {
    console.log("Snmp单选", records);
    this.selectedSnmpData = records;
    sessionStorage.setItem("selectedSnmpData", JSON.stringify(records));
  }
  //复选框-Snmp全选
  public checkboxSnmpAll({ records }) {
    console.log("Snmp全选", records);
    this.selectedSnmpData = records;
    sessionStorage.setItem("selectedSnmpData", JSON.stringify(records));
  }
  //复选框-Ping单选
  public checkboxPing({ records }) {
    console.log("Ping单选", records);
    this.selectedPingData = records;
    sessionStorage.setItem("selectedPingData", JSON.stringify(records));
  }
  //复选框-Ping全选
  public checkboxPingAll({ records }) {
    console.log("Ping全选", records);
    this.selectedPingData = records;
    sessionStorage.setItem("selectedPingData", JSON.stringify(records));
  }

  // 下一步-测试可达性
  public nextStep() {
    console.log(this.list);
    let checkedArr = this.list.filter((item) => item.checked == true);
    if (checkedArr.length <= 0) {
      this.$message({
        showClose: true,
        message: "至少选择一个协议！",
        type: "error",
      });
    } else {
      console.log(checkedArr);
      let type = [];
      for (let i = 0; i < checkedArr.length; i++) {
        console.log(checkedArr[i].protocol);
        type.push(checkedArr[i].protocol);
        if (
          checkedArr[i].protocol == "Snmp" ||
          checkedArr[i].protocol == "Ping"
        ) {
          if (this.snmpData.length > 0 || this.pingData.length > 0) {
            if (
              this.selectedSnmpData.length > 0 ||
              this.selectedPingData.length > 0
            ) {
              this.$router.push({
                path: "/find/progress",
                name: "progress",
                //params传参 需要使用 name 否则取不到；对应路由配置的 name
                params: {
                  type: JSON.stringify(type),
                },
              });
            } else {
              this.$message({
                showClose: true,
                message: "至少选择一条数据，请进入【参数设置】进行勾选！",
                type: "error",
              });
            }
          } else {
            this.$message({
              showClose: true,
              message: "请先设置参数！",
              type: "error",
            });
          }
        } else {
          // web、nmap
          // this.$router.push("/find/progress");
        }
      }
    }
  }

  //弹出协议设置弹窗
  public openPup(type: any) {
    console.log(type);
    if (type == "Snmp") {
      this.isShowSnmpPup = true;
    } else if (type == "Ping") {
      this.isShowPingPup = true;
    }
  }
  //关闭协议设置弹窗
  public closePup(type: any) {
    if (type == "Snmp") {
      this.isShowSnmpPup = false;
    } else if (type == "Ping") {
      this.isShowPingPup = false;
    }
  }

  //表格新增一行
  public add(type: any) {
    console.log("表格新增一行");
    let record = {};
    if (type == "Snmp") {
      record = {
        name: "",
        startIP: "",
        endIP: "",
        versions: "v2c",
        isShowTips: false,
        tips: "",
        options: [
          {
            value: "v1",
            label: "v1",
          },
          {
            value: "v2c",
            label: "v2c",
          },
          {
            value: "v3",
            label: "v3",
          },
        ],
      };
      this.snmpData.push(record);
    } else if (type == "Ping") {
      record = {
        startIP: "",
        endIP: "",
        isShowTips: false,
        tips: "",
      };
      this.pingData.push(record);
    }
  }

  public tableRowClassName({ row, rowIndex }) {
    //把每一行的索引放进row
    row.index = rowIndex;
  }
  public deleteRow(row: any, type: any) {
    let index = row.index;
    console.log("type", type, index);
    if (type == "Snmp") {
      this.snmpData.splice(index, 1);
    } else if (type == "Ping") {
      this.pingData.splice(index, 1);
    }
  }

  //ip地址判断
  public isValidIP(ip: any) {
    var reg = /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/;
    return reg.test(ip);
  }
  // 确定
  public submit(type: any) {
    console.log("确定", type);
    if (type == "Snmp") {
      console.log(this.snmpData);
      // Snmp
      if (this.snmpData.length > 0) {
        for (let i = 0; i < this.snmpData.length; i++) {
          let startIP = this.snmpData[i].startIP;
          let endIP = this.snmpData[i].endIP;
          let name = this.snmpData[i].name.trim();
          console.log(this.isValidIP(startIP), startIP);
          console.log(this.isValidIP(endIP), endIP);

          this.snmpData[i].isShowTips = false;
          this.snmpData[i].tips = "";

          let _startIP = startIP.substring(0, startIP.lastIndexOf(".")); //截取最后一个.之前的内容
          let _endIP = endIP.substring(0, endIP.lastIndexOf(".")); //截取最后一个.之前的内容
          //截取开始IP最后一个/之后的值
          let startIPIndex = startIP.lastIndexOf(".");
          let __startIP = startIP.substring(startIPIndex + 1, startIP.length);
          //截取结束IP最后一个/之后的值
          let endIPindex = endIP.lastIndexOf(".");
          let __endIP = endIP.substring(endIPindex + 1, endIP.length);
          console.log(_startIP, __startIP, _endIP, __endIP);
          if (name.length == 0) {
            this.$message({
              showClose: true,
              message: "请重新输入团体字!",
              type: "error",
            });
            return;
          } else if (!this.isValidIP(startIP) || !this.isValidIP(endIP)) {
            this.$message({
              showClose: true,
              message: "请重新输入起始IP或结束IP！",
              type: "error",
            });
            this.snmpData[i].isShowTips = true;
            this.snmpData[i].tips = "非法的ip地址";
          } else if (_startIP != _endIP) {
            this.$message({
              showClose: true,
              message: "ip必须在同一个c段!",
              type: "error",
            });
            this.snmpData[i].isShowTips = true;
            this.snmpData[i].tips = "ip必须在同一个c段";
          } else if (parseInt(__startIP) > 255 || parseInt(__endIP) > 255) {
            this.$message({
              showClose: true,
              message: "IP地址不能超过255!",
              type: "error",
            });
            this.snmpData[i].isShowTips = true;
            this.snmpData[i].tips = "IP地址不能超过255";
          } else if (parseInt(__startIP) > parseInt(__endIP)) {
            this.$message({
              showClose: true,
              message: "结束地址必须大于等于起始地址!",
              type: "error",
            });
            this.snmpData[i].isShowTips = true;
            this.snmpData[i].tips = "结束地址必须大于等于起始地址";
          } else {
            this.$message({
              showClose: true,
              message: "操作成功！",
              type: "success",
            });
            this.isShowSnmpPup = false;
            console.log("this.snmpData", this.snmpData);

            sessionStorage.setItem("snmpData", JSON.stringify(this.snmpData));
          }
        }
      } else {
        // this.$message({
        //   showClose: true,
        //   message: "至少添加一条数据！",
        //   type: "error",
        // });
        this.isShowSnmpPup = false;
        sessionStorage.setItem("snmpData", JSON.stringify(this.snmpData));
      }
    } else if (type == "Ping") {
      console.log("pingData", this.pingData);
      // ping
      if (this.pingData.length > 0) {
        for (let i = 0; i < this.pingData.length; i++) {
          let startIP = this.pingData[i].startIP;
          let endIP = this.pingData[i].endIP;
          console.log(this.isValidIP(startIP), startIP);
          console.log(this.isValidIP(endIP), endIP);

          this.pingData[i].isShowTips = false;
          this.pingData[i].tips = "";

          let _startIP = startIP.substring(0, startIP.lastIndexOf(".")); //截取最后一个.之前的内容
          let _endIP = endIP.substring(0, endIP.lastIndexOf(".")); //截取最后一个.之前的内容
          //截取开始IP最后一个/之后的值
          let startIPIndex = startIP.lastIndexOf(".");
          let __startIP = startIP.substring(startIPIndex + 1, startIP.length);
          //截取结束IP最后一个/之后的值
          let endIPindex = endIP.lastIndexOf(".");
          let __endIP = endIP.substring(endIPindex + 1, endIP.length);
          console.log(_startIP, __startIP, _endIP, __endIP);
          if (!this.isValidIP(startIP) || !this.isValidIP(endIP)) {
            this.$message({
              showClose: true,
              message: "请重新输入起始IP或结束IP！",
              type: "error",
            });
            this.pingData[i].isShowTips = true;
            this.pingData[i].tips = "非法的ip地址";
          } else if (_startIP != _endIP) {
            this.$message({
              showClose: true,
              message: "ip必须在同一个c段!",
              type: "error",
            });
            this.snmpData[i].isShowTips = true;
            this.snmpData[i].tips = "ip必须在同一个c段";
          } else if (parseInt(__startIP) > 255 || parseInt(__endIP) > 255) {
            this.$message({
              showClose: true,
              message: "IP地址不能超过255!",
              type: "error",
            });
            this.pingData[i].isShowTips = true;
            this.pingData[i].tips = "IP地址不能超过255";
          } else if (parseInt(__startIP) > parseInt(__endIP)) {
            this.$message({
              showClose: true,
              message: "结束地址必须大于等于起始地址!",
              type: "error",
            });
            this.pingData[i].isShowTips = true;
            this.pingData[i].tips = "结束地址必须大于等于起始地址";
          } else {
            this.$message({
              showClose: true,
              message: "操作成功！",
              type: "success",
            });
            this.isShowPingPup = false;
            console.log("this.pingData", this.pingData);

            sessionStorage.setItem("pingData", JSON.stringify(this.pingData));
          }
        }
      } else {
        // this.$message({
        //   showClose: true,
        //   message: "至少添加一条数据！",
        //   type: "error",
        // });
        this.isShowPingPup = false;
        sessionStorage.setItem("pingData", JSON.stringify(this.pingData));
      }
    }
  }
}
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
/deep/.el-tooltip__popper
  background red
// 重置表格组件
/deep/.vxe-body--row .vxe-body--column, .vxe-table--render-default .vxe-header--column:not(.col--ellipsis)
  height 40px
  padding 0
/deep/.vxe-table--header-wrapper
  border-bottom solid 2px #69aeff
  color #000
/deep/.vxe-table--render-default .vxe-body--column:not(.col--ellipsis), .vxe-table--render-default .vxe-footer--column:not(.col--ellipsis), .vxe-table--render-default .vxe-header--column:not(.col--ellipsis)
  padding 0
/deep/.vxe-body--row .vxe-body--column
  border-bottom dotted 1px #a4a4a4
/deep/.vxe-input--inner, .el-input__inner
  border-radius 0
  border solid 1px #d2d2d2
  background #f7f7f7
/deep/.vxe-table--render-default .vxe-body--column, .vxe-table--render-default .vxe-footer--column, .vxe-table--render-default .vxe-header--column
  text-align center
/deep/.vxe-table--render-default .vxe-cell
  position relative
  .warning
    position absolute
    right -6px
    top 0px
/deep/.vxe-table--body-wrapper
  overflow-y visible
  overflow-x visible
.pointer
  cursor pointer
/deep/.el-input__inner
  padding 0 5px
  border-radius 0
  width 127px
/deep/.el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-checked .el-checkbox__inner, background-color #0075FF
  border-color #0075FF
/deep/.el-checkbox__inner:hover, .el-checkbox__inner:hover
  border-color #0075FF
/deep/.el-checkbox__input.is-checked+.el-checkbox__label, .el-checkbox__input.is-checked+.el-checkbox__label
  color #000
.step1
  width 994px
  margin 110px auto
  background #fff
  padding 60px 80px
  -moz-box-shadow 3px 3px 3px #E1E1E1
  -webkit-box-shadow 3px 3px 3px #E1E1E1
  box-shadow 3px 3px 3px #E1E1E1
  .head
    font-weight 700
    line-height 50px
    color #000000
    text-align left
  .body
    .th
      display flex
      justify-content space-between
      color #000
      font-weight 700
      font-size 13px
      line-height 30px
      border-bottom solid 2px #69AEFF
      padding-left 40px
      padding-right 60px
      .td
        text-align left
      .td:last-child
        width 55px
        text-align center
    .tr
      border-bottom dotted 1px #A4A4A4
      padding-left 20px
      padding-right 40px
      margin 0 20px
      display flex
      justify-content space-between
      align-items center
      height 40px
      font-size 13px
      color #333
      .icon
        width 15px
        height 15px
      .td
        text-align left
      .td:last-child
        width 55px
        text-align center
    .th .td:nth-child(1), .tr .td:nth-child(1)
      width 30%
    .th .td:nth-child(2), .tr .td:nth-child(2)
      width 30%
    .th .td:nth-child(3), .tr .td:nth-child(3)
      width 30%
    .th .td:nth-child(4), .tr .td:nth-child(4)
      width 10%
  .foot
    display flex
    justify-content center
    margin-top 90px
    .next-step-btn, .cancel-btn
      width 117px
      height 30px
      line-height 30px
      margin 0 15px
      border-radius 5px
      border none
      font-size 13px
      color #fff
      cursor pointer
    .next-step-btn
      background #1269FF
    .cancel-btn
      background #C3C3C3
.set-pup-wrap
  position fixed
  left 0
  right 0
  margin 0 auto
  top 150px
  z-index 100
  background #fff
  padding 25px 33px
  border solid 8px rgba(170, 170, 170, 0.1)
  border-radius 10px
  width 840px
  .button-list
    display flex
    justify-content center
    margin-top 25px
    .button-primary, .button-cancel
      width 96px
      height 30px
      line-height 30px
      margin 0 25px
      border-radius 5px
      border none
      font-size 13px
      color #fff
      text-align center
      cursor pointer
    .button-primary
      background #1269FF
    .button-cancel
      background #C3C3C3
  /deep/.el-input__inner
    background #f7f7f7
    border solid 1px #d2d2d2
.el-table .cell img
  cursor pointer
.modal-content
  position relative
  .close
    position absolute
    top -20px
    right -20px
    cursor pointer
    .svg-icon
      font-size 11px
  .content
    width 100%
    max-height 310px
    overflow-y auto
    overflow-x hidden
    .title
      font-size 14px
      color #2769ea
      font-weight 700
      text-align left
    .table-modal
      width 100%
      margin-top 15px
      border-collapse collapse
      .t-header
        border-bottom 2px solid #69aeff
        th
          padding-bottom 10px
          color #000000
          font-size 13px
          font-weight 700
          min-width 30px
        th:first-child
          font-size 15px
        th:last-child
          width 60px
      .t-body
        border-bottom 1px dotted #a4a4a4
        td
          padding-top 10px
          padding-bottom 10px
          text-align center
          color #333
          font-size 13px
          width 20px !important
        td:first-child
          font-size 15px
        td:last-child
          font-size 15px
        .t-body-input
          width 14.8%
          position relative
          .warning
            position absolute
            right -5px
            top 34%
          .el-input
            height 26px
            .el-input__icon
              line-height 26px
          .el-input input
            border 1px solid #d2d2d2
            background-color #f7f7f7
            color #000000
            text-align left
            border-radius 0
            height 100
</style>
